var Dispatcher = require('flux').Dispatcher;
var MicroEvent = require('microevent');///还可以用[events]来实现触发和绑定   用object-assign来合并object(store)
var React = require("react");
var ReactDom = require("react-dom");
var AppDispatcher = new Dispatcher();
/*
microevent mixin实现
var mixin = function (destObject) {
	var props = ['bind', 'unbind', 'trigger'];
	for (var i = 0; i < props.length; i++) {
		var prop=props[i];
		destObject.prototype[prop] = MicroEvent.prototype[prop];
	}
}
*/
//Store 用来实现数据的管理 增删查改
function Store(data){
	this.isSaved = true;
	this.items=data || [{name:"Hello",id:'13'}];
	this.setItems=function(items) {
		if (items) {
			this.items=items;
		}
	}
	this.saveAll = function () {
		var save=this.items;
		localStorage.setItem('items', JSON.stringify(save));
		this.isSaved=true;
	}
	this.add=function(item){
		if (item) {
			this.items.push(item);
			this.isSaved = false;
		}
	}
	this.getAll=function(){
		var rawData = localStorage.getItem('items') || "[]";
		var items = this.isSaved?JSON.parse(rawData):this.items;
		if (items) {
			this.setItems(items);
			return items;
		}
		return this.items;
	}
	this.save=function() {
		this.saveAll();
	}
};
MicroEvent.mixin( Store );
var ListStore=new Store();

/*
关键：Store 不是 model，而是 model 的容器。

关键：应用中唯一知道如何更新数据的就是 Store。这是 Flux 最重要的一部分。我们分发的事件是不知如何添加或者删除条目的。
*/

//Action==>Dispatcher
//处理集 统一管理action
var ListActions = {
	add:function(item) {
		AppDispatcher.dispatch({
			eventName:'new-item',
			item:item
		});
	}
}

//Dispatcher==>Store
//处理导向  类似于hub统一管理
AppDispatcher.register(function(payload){
	switch(payload.eventName) {
		case 'new-item':
		ListStore.add(payload.item);
		//Store==>View
		ListStore.trigger('change');
		break;
	}
	return true;
})
/*
没错，render 函数确实被调用了，render 函数中所有代码都一次次的执行了。
但是只有在 DOM 真正变化的时候 React 才把变化 render 出来 。
render函数生成了一个“Virtual DOM”，React会对比之前一次render出来的 DOM。
如果这两次的 Virtual DOM 不一样，React 就更新真实 DOM 中变化的部分。

换句话说就是react在渲染到真实的dom之前已经  做过diff 从而达到只更新改变的 未改变部分 没有变化
*/
var ItemGrid = React.createClass({
	render:function(){
		var items = ListStore.getAll();
		// var items=[]
		var itemHtml = items.map(function(item, i) {
				return (
					<li key={i} onClick={this.wtfClick} style={{color:"blue"}}>
						{item.name}
					</li>
				);
			},this
		);
		// console.log(itemHtml)
		return (
			<div className="ItemGrid" style={{color:"#000"}}>
				<ul>
					{itemHtml}
				</ul>
				<button onClick={this.handleBtnAddClick}>New Item</button>
			</div>
		)
	},
	wtfClick(event) {
		// alert('click')
		ListStore.saveAll()
		// console.log(event.currentTarget)
	},
	handleBtnAddClick:function(event) {
		var item = {
			name:"Hello"
		};
		/*AppDispatcher.dispatch({
			eventName:"new-item",
			item:{
				name:"XXX"
			}
		});*///====>ListActions.add();//使用Action之后就可以这样来添加item
		ListActions.add(item)
	},
	componentDidMount:function(){
		ListStore.bind('change',this.listChanged);
	},
	componentWillUnmount:function(){
		ListStore.unbind('change', this.listChanged);
	},
	listChanged:function(){
		this.forceUpdate();
	}
})
ReactDom.render(<ItemGrid/>,document.getElementById('root'));


if (module.hot) {
  module.hot.accept();
  module.hot.dispose(function() {
    // clearInterval(timer);
  });
}